<template>
	<view class="pick">
		<view class="picklist">
			<view class="list">
				<image :src="fromdata.carFrontLeft" mode="aspectFill" v-if="fromdata.carFrontLeft" @click="gochooseImage(1)"></image>
				<image src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/ec1add5b3873481494c478b8fd23eb96.png" class="temp" mode="aspectFill" v-else @click="gochooseImage(1)"></image>
				<view class="text">左前45度</view>
				<image v-if="fromdata.carFrontLeft" @click="delchooseImage(1)" class="del" src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/70cbd44cc07d4a9fa17252e4d8465a9f.png"></image>
			</view>
			<view class="list" >
				<image :src="fromdata.carBackRight" mode="aspectFill" v-if="fromdata.carBackRight" @click="gochooseImage(2)"></image>
				<image src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/5eb15fd8ae4749448f33aacadd079d62.png" class="temp" mode="aspectFill" v-else @click="gochooseImage(2)"></image>
				<view class="text">右后45度</view>
				<image v-if="fromdata.carBackRight"  @click="delchooseImage(2)" class="del" src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/70cbd44cc07d4a9fa17252e4d8465a9f.png"></image>
			</view>
			<view class="list" >
				<image :src="fromdata.carTrunk" mode="aspectFill" v-if="fromdata.carTrunk" @click="gochooseImage(3)"></image>
				<image src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/1d36af3148524e19b6505bf09f75969f.png" class="temp" mode="aspectFill" v-else @click="gochooseImage(3)"></image>
				<view class="text">后备箱</view>
				<image v-if="fromdata.carTrunk" @click="delchooseImage(3)" class="del" src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/70cbd44cc07d4a9fa17252e4d8465a9f.png"></image>
			</view>
			<view class="list" >
				<image :src="fromdata.carCenterConsole" mode="aspectFill" v-if="fromdata.carCenterConsole" @click="gochooseImage(4)"></image>
				<image src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/f878223c02624d42a87324ba82ac8f07.png" class="temp-card" mode="aspectFill" v-else @click="gochooseImage(4)"></image>
				<view class="text">仪表盘</view>
				<image v-if="fromdata.carCenterConsole" @click="delchooseImage(4)" class="del" src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/70cbd44cc07d4a9fa17252e4d8465a9f.png"></image>
			</view>
			<view class="list" >
				<image :src="fromdata.xszFront" mode="aspectFill" v-if="fromdata.xszFront" @click="gochooseImage(5)"></image>
				<image src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/6f31ceeed76f456583642f20998de502.png" class="temp-card" mode="aspectFill" v-else @click="gochooseImage(5)"></image>
				<view class="text">行车证正本</view>
				<image  v-if="fromdata.xszFront"  @click="delchooseImage(5)" class="del" src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/70cbd44cc07d4a9fa17252e4d8465a9f.png"></image>
			</view>
			<view class="list" >
				<image :src="fromdata.xszBack" mode="aspectFill" v-if="fromdata.xszBack" @click="gochooseImage(6)"></image>
				<image src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/567d635f2d0544b9b82e508ce99de055.png" class="temp-card" mode="aspectFill" v-else @click="gochooseImage(6)"></image>
				<view class="text">行车证副本</view>
				<image v-if="fromdata.xszBack" @click="delchooseImage(6)" class="del" src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/70cbd44cc07d4a9fa17252e4d8465a9f.png"></image>
			</view>
			<view class="list" >
				<image :src="fromdata.jqBack" mode="aspectFill" v-if="fromdata.jqBack" @click="gochooseImage(7)"></image>
				<image src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/0697c57ef38b481c99bb1464ad9926ad.png" class="temp-card" mode="aspectFill" v-else @click="gochooseImage(7)"></image>
				<view class="text">交强险保单(<font style="color: red;">非必选</font>)</view>
				<image v-if="fromdata.jqBack" @click="delchooseImage(7)" class="del" src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/70cbd44cc07d4a9fa17252e4d8465a9f.png"></image>
			</view>
			<view class="list">
				<image :src="fromdata.carBak4" mode="aspectFill" style="height: 204rpx;"  @click="gochooseImage(8)"></image>
				<view class="text">其他图片</view>
				<image v-if="fromdata.carBak4"  @click="delchooseImage(8)" class="del" src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/70cbd44cc07d4a9fa17252e4d8465a9f.png"></image>
			</view>
			<view class="list" v-if="fromdata.carBak4" >
				<image :src="fromdata.carBak5" mode="aspectFill" style="height: 204rpx;" @click="gochooseImage(9)"></image>
				<view class="text">其他图片</view>
				<image v-if="fromdata.carBak5"  @click="delchooseImage(9)" class="del" src="https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/70cbd44cc07d4a9fa17252e4d8465a9f.png"></image>
			</view>
		</view>
		<view class="sub" @click="sub()">点击提交</view>
	</view>
</template>

<script>
import { UniIcons } from '@/components/uni-icons/uni-icons.vue';
import order from '../../servers/order.js';
import config from '../../servers/config.js';
export default {
	data() {
		return {
			Authorization: '',
			fromdata: {
				carFrontLeft: '',
				carFrontRight: '',
				carBackLeft: '',
				carCenterConsole: '',
				carBackRight: '',
				carTrunk: '',
				xszFront: '',
				xszBack: '',
				jqBack: '',
				carBak1: '',
				carBak2: '',
				carBak3: '',
				carBak4: '',
				carBak5: '',
				orderId: 0
			},
			orderId: undefined, 
			submitdata: {
				carFrontLeft: '',
				carFrontRight: '',
				carBackLeft: '',
				carCenterConsole: '',
				carBackRight: '',
				carTrunk: '',
				xszFront: '',
				xszBack: '',
				jqBack: '',
				carBak1: '',
				carBak2: '',
				carBak3: '',
				carBak4: '',
				carBak5: '',
				orderId: 0
			}
		};
	},
	onLoad(e) {
		this.fromdata.orderId = e.id;
		this.submitdata.orderId = e.id;
		this.orderId = e.id;
		// this.getdata()
	},
	mounted() {
		this.Authorization = uni.getStorageSync('Authorization');
		this.getData();
		console.log(this.imgUrl);
	},
	methods: {
		getData() {
			order.getGoodImg(this.submitdata.orderId).then(res => {
				var _this = this;
				console.log('订单图片：' + res.data);
				if(res.data){
					_this.submitdata = res.data;
					if (res.data.carFrontLeft) {
						_this.fromdata.carFrontLeft = _this.imgUrl + res.data.carFrontLeft;
						_this.submitdata.carFrontLeft = res.data.carFrontLeft;
					}
					if (res.data.carBackRight) {
						console.log(_this.fromdata.carBackRight);
						_this.fromdata.carBackRight = _this.imgUrl + res.data.carBackRight;
						_this.submitdata.carBackRight = res.data.carBackRight;
					}
					if (res.data.carTrunk) {
						_this.fromdata.carTrunk = _this.imgUrl + res.data.carTrunk;
						_this.submitdata.carTrunk = res.data.carTrunk;
					}
					if (res.data.carCenterConsole) {
						_this.fromdata.carCenterConsole = _this.imgUrl + res.data.carCenterConsole;
						_this.submitdata.carCenterConsole = res.data.carCenterConsole;
					}
					if (res.data.xszFront) {
						_this.fromdata.xszFront = _this.imgUrl + res.data.xszFront;
						_this.submitdata.xszFront = res.data.xszFront;
					}
					if (res.data.xszBack) {
						_this.fromdata.xszBack = _this.imgUrl + res.data.xszBack;
						_this.submitdata.xszBack = res.data.xszBack;
					}
					if (res.data.jqBack) {
						_this.fromdata.jqBack = _this.imgUrl + res.data.jqBack;
						_this.submitdata.jqBack = res.data.jqBack;
					}
					if (res.data.carBak4) {
						_this.fromdata.carBak4 = _this.imgUrl + res.data.carBak4;
						_this.submitdata.carBak4 = res.data.carBak4;
					}
					if (res.data.carBak5) {
						_this.fromdata.carBak5 = _this.imgUrl + res.data.carBak5;
						_this.submitdata.carBak5 = res.data.carBak5;
					}
				}
			});
		},
		delchooseImage(e) {
			var _this = this;
			var delImg = {
				orderId: _this.submitdata.orderId,
				sort: e
			};
			console.log(delImg)
			//删除图片
			order.delGoodImg(delImg).then(res => {
				if(res.code==200){
					if (e == 1) {
						_this.fromdata.carFrontLeft =''
						_this.submitdata.carFrontLeft = '';						
					} else if (e == 2) {
						_this.fromdata.carBackRight = '';
						_this.submitdata.carBackRight = '';
					} else if (e == 3) {
						_this.fromdata.carTrunk ='';
						_this.submitdata.carTrunk = '';					
					} else if (e == 4) {
						_this.fromdata.carCenterConsole = '';
						_this.submitdata.carCenterConsole = '';						
					} else if (e == 5) {
						_this.fromdata.xszFront = '';
						_this.submitdata.xszFront = '';
					} else if (e == 6) {
						_this.fromdata.xszBack ='';
						_this.submitdata.xszBack = '';
					} else if (e == 7) {
						_this.fromdata.jqBack ='';
						_this.submitdata.jqBack = '';
					} else if (e == 8) {
						_this.fromdata.carBak4 ='';
						_this.submitdata.carBak4 = '';
					} else if (e == 9) {
						_this.fromdata.carBak5 ='';
						_this.submitdata.carBak5 = '';
					}
				}
				
				
			});
		},
		gochooseImage(e) {
			var Authorization = this.Authorization;
			var _this = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				success: function(res) {
					console.log('获取了第' + e + '张的图片,内容为：' + JSON.stringify(res.tempFilePaths));
					console.log(Authorization);
					uni.showLoading({
						mask: true
					});
					uni.uploadFile({
						// #ifdef MP-WEIXIN
						url: config.loadUrl + '/api/driver/upload',
						// #endif
						// #ifdef H5
						url: config.loadH5Url + '/api/driver/upload',
						// #endif
						filePath: res.tempFilePaths[0],
						name: 'file',
						header: {
							Authorization: Authorization
						},
						success: uploadFileRes => {
							var rtess = JSON.parse(uploadFileRes.data);
							console.log(rtess);
							uni.hideLoading();
							if (rtess.code == 200) {
								var da = rtess.imgUrl;
								console.log(da);
								console.log(_this.imgUrl + da);
								var uploadImg = {};
								uploadImg.orderId = _this.orderId;
								if (e == 1) {
									_this.fromdata.carFrontLeft = _this.imgUrl + da;
									_this.submitdata.carFrontLeft = da;
									uploadImg.carFrontLeft = da;
								} else if (e == 2) {
									_this.fromdata.carBackRight = _this.imgUrl + da;
									_this.submitdata.carBackRight = da;
									uploadImg.carBackRight = da;
								} else if (e == 3) {
									_this.fromdata.carTrunk = _this.imgUrl + da;
									_this.submitdata.carTrunk = da;
									uploadImg.carTrunk = da;
								} else if (e == 4) {
									_this.fromdata.carCenterConsole = _this.imgUrl + da;
									_this.submitdata.carCenterConsole = da;
									uploadImg.carCenterConsole = da;
								} else if (e == 5) {
									_this.fromdata.xszFront = _this.imgUrl + da;
									_this.submitdata.xszFront = da;
									uploadImg.xszFront = da;
								} else if (e == 6) {
									_this.fromdata.xszBack = _this.imgUrl + da;
									_this.submitdata.xszBack = da;
									uploadImg.xszBack = da;
								} else if (e == 7) {
									_this.fromdata.jqBack = _this.imgUrl + da;
									_this.submitdata.jqBack = da;
									uploadImg.jqBack = da;
								} else if (e == 8) {
									_this.fromdata.carBak4 = _this.imgUrl + da;
									_this.submitdata.carBak4 = da;
									uploadImg.carBak4 = da;
								} else if (e == 9) {
									_this.fromdata.carBak5 = _this.imgUrl + da;
									_this.submitdata.carBak5 = da;
									uploadImg.carBak5 = da;
								}
								//保存图片
								order.saveGoodImg(uploadImg).then(res => {});
							} else {
								uni.showToast({
									title: rtess.msg,
									duration: 2000,
									icon: 'none'
								});
							}
						}
					});
				}
			});
		},
		sub() {
			console.log(this.submitdata)
			if (!this.submitdata.carFrontLeft) {
				uni.showToast({
					title: '请上传左前方照片',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			if (!this.submitdata.xszBack) {
				uni.showToast({
					title: '请上传行驶证副本',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			if (!this.submitdata.carCenterConsole) {
				uni.showToast({
					title: '请上传仪表盘照片',
					duration: 2000,
					icon: 'none'
				});
				return;
			}

			if (!this.submitdata.carTrunk) {
				uni.showToast({
					title: '请上传后备箱照片',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			if (!this.submitdata.carBackRight) {
				uni.showToast({
					title: '请上传右后方照片',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			if (!this.submitdata.xszFront) {
				uni.showToast({
					title: '请上传行驶证照片',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			// if (!this.submitdata.jqBack) {
			// 	uni.showToast({
			// 		title: '请上传车辆交强险照片',
			// 		duration: 2000,
			// 		icon: 'none'
			// 	});
			// 	return;
			// }
			order.subPickCar(this.submitdata).then(res => {
				uni.showToast({
					title: res.msg,
					duration: 2000,
					complete: () => {
						uni.switchTab({
							url: '../index/index?type=6'
						});
					}
				});
			});
		}
	}
};
</script>

<style lang="less" scoped>
.pick {
	padding: 0 30rpx 50rpx;
	.picklist {
		overflow: hidden;
		padding-top: 50rpx;
		.list {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			float: left;
			background: rgb(200, 200, 202);
			width: 335rpx;
			height: 275rpx;
			color: #ffffff;
			margin-bottom: 20rpx;

			image {
				width: 315rpx;
				height: 204rpx;
			}
			.temp-card {
				width: 269rpx;
				height: 204rpx;
				transform: scale(0.68, 0.68);
			}
			.text {
				width: 100%;
				height: 69rpx;
				background: #425985;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 69rpx;
			}
			.del {
				position: absolute;
				top: 0px;
				right: 0px;
				width: 50rpx;
				height: 50rpx;
				z-index: 9;
				background: rgba(0, 0, 0, 0.5);
				padding: 10rpx;
			}
		}
		.list:nth-child(2n) {
			margin-left: 20rpx;
		}
	}
	.sub {
		margin-top: 105rpx;
		height: 106rpx;
		background: #ffffff;
		border-radius: 10rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #4e6792;
		line-height: 106rpx;
		text-align: center;
	}
}
</style>
